<html>
<head>
<title>ScrollBar example</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="../src/main/js/loader.js"></script>
<script type="text/javascript">

	load('core.ui.Window');
	load('core.ui.ScrollBar');

	function init() {
		
		var wnd = new core.ui.Window();
		wnd.setText('When the user moves the knob on the vertical scroll bar up and down, the visible area of the client moves up and down. Similarly, when the user moves the knob on the horizontal scroll bar to the right and left, the visible area of the client moves back and forth accordingly. The position of the knob relative to its track is proportionally equal to the position of the visible area relative to the client. In the Java look and feel and some others, the size of the knob gives a visual clue as to how much of the client is visible.');
		wnd.center();
		wnd.show();
		
		var scroll = new core.ui.ScrollBar();
//		scroll.setOrientation(core.ui.ScrollBar.HORISONTAL);
		scroll.setScrollTarget(wnd);
		scroll.show();
	}
	
</script>
<style type="text/css">

	.Window {
		width: 200px;
		height: 200px;
		background-color: lightblue;
		border: 1px solid blue;
	}
	
	.ScrollBar {
		left: 0px;
		top: 0px;
	}
	
	.ScrollBar-vertical { height: 100%; }
	.ScrollBar-horisontal { width: 100%; }
	
</style>
</head>

<body onload="init()" />
</html>